import { Button, Modal, TextField, Icon } from "@shopify/polaris";
import { DeleteMinor, AddMajor } from "@shopify/polaris-icons";
import { useState, useCallback } from "react";
import styled from "./index.module.less";

interface Props {
  active: boolean;
  setActive: (value: boolean) => void;
}

function ModalExample({ active, setActive }: Props) {
  //

  const handleChange = useCallback(() => setActive(!active), [active]);

  const [valueBZ, setValueBZ] = useState("");

  const handleChangeBZ = useCallback(
    (newValue: string) => setValueBZ(newValue),
    []
  );

  return (
    <Modal open={active} noScroll titleHidden onClose={handleChange} title="">
      <div
        style={{
          color: "#303030",
          fontSize: "14px",
          padding: "16px",
          fontWeight: "600",
          height: "52px",
          backgroundColor: "#F3F3F3",
          borderRadius: "20px 20px 0 0",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          zIndex: "999999999999999999",
        }}
      >
        <div>添加备注</div>
      </div>
      {/* <div style={{ padding: "16px" }}>
        
      </div> */}
      <Modal.Section>
        <TextField
          label="备注"
          value={valueBZ}
          onChange={handleChangeBZ}
          autoComplete="off"
        />
      </Modal.Section>
      <div
        style={{
          display: "flex",
          justifyContent: "end",
          alignItems: "center",
          padding: "16px",
        }}
      >
        <div>
          <Button
            size="slim"
            onClick={() => {
              setActive(false);
            }}
          >
            取消
          </Button>
        </div>
        <div style={{ marginLeft: "10px" }}>
          <Button size="slim" primary>
            完成
          </Button>
        </div>
      </div>
    </Modal>
  );
}

export default ModalExample;
